import React, {Fragment, Component} from 'react';
import HistoryListHeader from './HistoryListHeader';
import {SearchBar} from 'react-native-elements';
import {getHistory} from '../../api';
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  RefreshControl,
  ActivityIndicator,
} from 'react-native';
import Entypo from 'react-native-vector-icons/Entypo';

export default class HistoryList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      search: '',
      isLoading: false, // 刷新图标是否展示
      dataArray: [], // 数据
      current: 1, // 当前页
      page_size: 20, // 每一页展示条数
      pageCount: 1, // 最后一页的页码
      count: 1, // 总条数
    };
  }

  /**
   * search
   * @param search
   */
  updateSearch = async search => {
    this.setState({search});
    let {current, page_size} = this.state;
    await getHistory(current, page_size, search).then(res => {
      this.setState({
        dataArray: res.data,
        current: res.currentPage,
        pageCount: res.pageCount,
        count: res.count,
        isLoading: false,
      });
    });

  };

  // 加载数据
  async loadData(refreshing) {
    // refreshing ? '刷新事件':'触底事件'
    let {current, page_size, pageCount} = this.state;
    if (refreshing) {
      this.setState({
        isLoading: true,
      });
      await getHistory(1, page_size).then(res => {
        this.setState({
          dataArray: res.data,
          current: res.currentPage,
          pageCount: res.pageCount,
          count: res.count,
          isLoading: false,
        });
      });
    } else {
      console.log(current, pageCount);
      if (Number(current) < Number(pageCount)) {
        current++;
        this.genIndicator();
        let dataArray = [];
        await getHistory(current, page_size).then(res => {
          dataArray = this.state.dataArray.concat(res.data);
          this.setState({
            dataArray,
            current: res.currentPage,
            pageCount: res.pageCount,
            count: res.count,
          });
        });
      } else {
        // 已经是底部了
        this.genIndicator();
      }
    }
  }

  // 底部的组件加载
  genIndicator() {
    const {current, pageCount} = this.state;
    if (Number(current) == Number(pageCount)) {
      return (
        <View style={styles.indicatorContainer}>
          <Text
            style={{color: '#5DD5C8', marginTop: 10, fontSize: 14}}>~~~
            <Entypo name={'bowl'} style={{fontSize: 18}}/>-奥是有底线滴~~~~
          </Text>
        </View>
      );
    } else {
      return (
        <View style={styles.indicatorContainer}>
          <ActivityIndicator
            style={styles.indicator}
            size={'large'}
            animating={true}
          />
          <Text>正在加载...</Text>
        </View>
      );
    }
  }

  // 渲染的视图
  _renderItem(data) {
    const {item} = data;
    return (
      <View style={styles.list}>
        <Text style={styles.text}>{item.type}</Text>
        <Text style={styles.text}>{item.code}</Text>
        <Text style={styles.text}>{item.content}</Text>
      </View>
    );
  }

  // 初始化数据
  initData = async () => {
    const {current, page_size} = this.state;
    await getHistory(current, page_size).then(res => {
      console.log(res);
      let dataArray = res.data;
      this.setState({
        dataArray,
        current: res.currentPage,
        pageCount: res.pageCount,
        count: res.count,
      });
    });
  };

  componentDidMount(): void {
    this.initData();
  }

  render() {
    const {search} = this.state;
    return (
      <View>
        {/*搜索*/}
        {/*<SearchBar*/}
        {/*  placeholder="请输入类型..."*/}
        {/*  onChangeText={this.updateSearch}*/}
        {/*  value={search}*/}
        {/*  lightTheme={true}*/}
        {/*/>*/}
        <HistoryListHeader/>
        <FlatList
          data={this.state.dataArray}
          renderItem={data => this._renderItem(data)}
          refreshControl={
            <RefreshControl
              title={'加载中...'}
              colors={['#5DD5C8']} // 图标颜色
              tintColor={'orange'}
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.loadData(true);
              }}
            />
          }
          ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
          onEndReached={() => {
            this.loadData(false);
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginBottom: 150,
  },
  list: {
    flexDirection: 'row',
    backgroundColor: '#f8f8f8',
    marginBottom: 3,
    height: 60,
    lineHeight: 60,
    alignItems: 'center',
  },
  item: {
    height: 60,
    marginRight: 15,
    marginLeft: 15,
    marginBottom: 1,
    alignItems: 'center',
  },
  text: {
    color: '#3d3d3d',
    fontSize: 16,
    flex: 1,
    textAlign: 'center',
  },
  indicatorContainer: {
    marginBottom: 204,
    alignItems: 'center',
  },
  indicator: {
    color: 'red',
    margin: 10,
  },
});
